<template>
  <a-card class="general-card" title="店铺店员审核" :bordered="false">
    <!-- 搜索 -->
    <PickSearchColumn
      :columns="columnsSearch"
      @reset="
        (val) => {
          apiParams = { ...val, ...apiParams };
        }
      "
      @search="
        (val) => {
          apiParams = { ...apiParams, ...val };
        }
      "
    >
    </PickSearchColumn>
    <!-- 表格 -->
    <PickTablePage
      ref="tablePageRef"
      :columns="columnsTable"
      :methods="sortMethods"
      :api="getStaffAuditList"
      :api-params="apiParams"
      :bordered="true"
    >
      <template #approve="{ data }">
        <a-button
          v-if="data.checkStatus == '0'"
          type="text"
          @click="getStaffDetail(data)"
          >审核</a-button
        >
      </template>
    </PickTablePage>
    <!-- 审核弹窗 -->
    <a-modal
      title="店员审核"
      title-align="start"
      v-model:visible="auditModalVisible"
      :width="600"
    >
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="店铺名称">
          {{ auditForm.storeName }}
        </a-descriptions-item>
        <a-descriptions-item label="申请人">
          {{ auditForm.applyUserName }}
        </a-descriptions-item>
        <a-descriptions-item label="申请时间">
          {{ auditForm.applyTime }}
        </a-descriptions-item>
        <a-descriptions-item label="店员姓名">
          {{ auditForm.name }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号码">
          {{ auditForm.phone }}
        </a-descriptions-item>
      </a-descriptions>
      <div class="mt-6px">
        <a-alert type="warning"
          >提示: 为了避免账号创建的时间差, 请创建账号后再进行审核</a-alert
        >
      </div>

      <template #footer>
        <a-space>
          <a-button type="primary" @click="approveStaff">审核通过</a-button>
          <a-button status="danger" @click="showRejectModal"
            >审核不通过</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 审核不通过原因弹窗 -->
    <a-modal
      title="审核不通过原因"
      title-align="start"
      v-model:visible="rejectModalVisible"
      :width="440"
    >
      <div>
        <a-form
          ref="rejectFormRef"
          :model="rejectForm"
          :rules="rejectRules"
          :style="{ width: '400px' }"
          layout="vertical"
          auto-label-width
        >
          <a-form-item label="审核不通过原因" field="failSeason">
            <a-textarea
              v-model="rejectForm.failSeason"
              class="h-100px w-full"
              max-length="100"
              show-word-limit
            />
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <div style="text-align: right">
          <a-button style="margin-right: 5px" @click="closeRejectModal"
            >取消</a-button
          >
          <a-button type="primary" @click="rejectStaff">确定</a-button>
        </div>
      </template>
    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { PickSearchColumn, PickTablePage } from '@pickmall/ui-v3-components';
  import { ColumnsDataRule, MethodsRule, SearchRule } from '@/types/global';
  import {
    getStaffAuditList,
    approveStaffApplication,
    rejectStaffApplication,
    getAssistant,
  } from '@/api/staff';
  import { staffStatus } from '@/utils/tools';
  const tablePageRef = ref<any>('');
  const auditFormRef = ref<FormInstance>() as any;
  const rejectFormRef = ref<FormInstance>() as any;
  const auditModalVisible = ref(false);
  const rejectModalVisible = ref(false);

  const auditForm = ref({
    id: '',
    storeName: '',
    applyUserName: '',
    applyTime: '',
    name: '',
    phone: '',
  });

  const rejectForm = ref({
    failSeason: '',
  });
  const rejectRules = {
    failSeason: [{ required: true, message: '请填写审核不通过原因' }],
  };

  const apiParams = ref({
    pageNumber: 1,
    pageSize: 10,
    name: '',
    phone: '',
    storeName: '',
  });

  // 查询条件
  const columnsSearch: Array<SearchRule> = [
    {
      label: '店员姓名',
      model: 'name',
      disabled: false,
      input: true,
    },
    {
      label: '手机号码',
      model: 'phone',
      disabled: false,
      input: true,
    },
    {
      label: '店铺名称',
      model: 'storeName',
      disabled: false,
      input: true,
    },
  ];

  // 表格列配置
  const columnsTable: ColumnsDataRule[] = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 80
    // },
    {
      title: '店铺名称',
      dataIndex: 'storeName',
      width: 150,
    },
    {
      title: '店员姓名',
      dataIndex: 'name',
      width: 120,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      width: 150,
    },
    {
      title: '申请人',
      dataIndex: 'applyUserName',
    },
    {
      title: '申请时间',
      dataIndex: 'applyTime',
      width: 180,
    },
    {
      title: '审核人',
      dataIndex: 'checkUserName',
    },
    {
      title: '审核时间',
      dataIndex: 'checkTime',
      width: 180,
    },
    {
      title: '审核状态',
      dataIndex: 'checkStatus',
      slot: true,
      slotData: {
        badge: staffStatus,
      },
      width: 120,
    },
  ];

  // 操作列表
  const sortMethods: MethodsRule = {
    title: '操作',
    methods: [
      {
        slot: true,
        slotTemplate: 'approve',
      },
    ],
  };

  async function getStaffDetail(data: any) {
    console.log('获取店员详细信息', data);
    // 获取店员详细信息
    const res = await getAssistant(data.id);
    if (res.data.success) {
      const assistant = res.data.result;
      auditForm.value = {
        id: data.id,
        storeName: assistant.storeName || data.storeName,
        applyUserName: assistant.applyUserName || data.applyUserName,
        applyTime: assistant.applyTime || data.applyTime,
        name: assistant.name || data.name,
        phone: assistant.phone || data.phone,
      };
    } else {
      // 如果获取详情失败，使用表格中的基本信息
      auditForm.value = {
        id: data.id,
        storeName: data.storeName,
        applyUserName: data.applyUserName,
        applyTime: data.applyTime,
        name: data.name,
        phone: data.phone,
      };
    }
    auditModalVisible.value = true;
  }

  // 审核通过
  const approveStaff = async () => {
    approveStaffApplication({ id: auditForm.value.id, checkStatus: '1' }).then(
      (res) => {
        if (res.data.success) {
          Message.success('审核通过');
          auditModalVisible.value = false;
          tablePageRef.value.init();
        }
      }
    );
  };

  // 显示审核不通过原因弹窗
  const showRejectModal = () => {
    auditModalVisible.value = false;
    rejectModalVisible.value = true;
  };

  // 关闭审核不通过原因弹窗
  const closeRejectModal = () => {
    rejectForm.value.failSeason = '';
    rejectModalVisible.value = false;
  };

  // 审核不通过
  const rejectStaff = async () => {
    rejectFormRef.value.validate((valid) => {
      if (!valid) {
        rejectStaffApplication({
          id: auditForm.value.id,
          checkStatus: '2',
          failSeason: rejectForm.value.failSeason,
        }).then((res) => {
          if (res.data.success) {
            Message.success('已拒绝审核');
            rejectModalVisible.value = false;
            tablePageRef.value.init();
          }
        });
      }
    });
  };
</script>

<style scoped>
  .general-card {
    margin: 20px;
  }
</style>
